<!--
  @Descripttion:：功能描述
  @Author：yejianbo
  @Date：2022年08月05日 08:53:23
-->
<template>
  <section class="iframePage" id="page">
    <HeaderCom />
    <el-button
      v-if="showMenu"
      class="goback"
      icon="el-icon-arrow-left"
      @click="goBack"
      >返回</el-button
    >
    <iframe id="iframePage" class="page" frameborder="0" :src="pageUrl" />
    <FooterMenu />
  </section>
</template>

<script>
import HeaderCom from "@/components/header/index.vue";
import FooterMenu from "@/components/footerMenu/index.vue";
export default {
  // 组件名称
  name: "IframePage",
  components: {
    HeaderCom,
    FooterMenu,
  },
  // 组件状态值
  data() {
    return {
      pageUrl: "",
      showMenu: false,
    };
  },
  watch: {
    $route: function (newValue, oldValue) {
      console.log("aaa", newValue);
      const { pageUrl, showMenu = false } = this.$route.query;
      this.pageUrl = `/static/${pageUrl}.html`;
      this.showMenu = showMenu;
      this.setIframeHeight();
    },
  },
  mounted() {
    const { pageUrl, showMenu = false } = this.$route.query;
    this.pageUrl = `/static/${pageUrl}.html`;
    this.showMenu = showMenu;
    this.setIframeHeight();
  },
  // 组件方法
  methods: {
    setIframeHeight() {
      let iframePage = document.getElementById("iframePage");
      iframePage.height = 0;
      iframePage.onload = () => {
        iframePage.height = iframePage.contentWindow.document.body.scrollHeight;
        setTimeout(() => {
          document.getElementById("page").scrollIntoView(true);
        }, 20);
      };
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.iframePage {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 195px;
  .goback {
    position: fixed;
    top: 145px;
    left: 10px;
  }
  .page {
    position: relative;
    width: 100%;
    display: block;
    margin: 0 auto;
  }
}
</style>
